<template>
    <div class="person">
        <!-- <h2>我是Person组件</h2> -->

        <h2>姓名： {{ name }}</h2>
        <h2>年龄： {{ age }}</h2>
        <h2>地址： {{ address }}</h2>
        <!-- <h2>电话： {{ phone }}</h2> -->
        <button @click="changeName"> 修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showPhone">查看联系方式</button>

    </div>

</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>


<script lang="ts" setup>
import { ref } from 'vue'

// 定义响应式数据 
const name = ref('张三')
const age = ref(18)
const phone = '19012334560'
let address = '北京市朝阳区'

console.log('setup this:  ',this) //setup中的this是undefined，Vue3在弱化this了
console.log('address: ',address)
console.log('name: ',name)
console.log('age: ',age)
console.log('phone: ',phone)

function changeName() {
    name.value = '李四'
}

function changeAge() {
    age.value += 1
}

function showPhone() {
    alert(phone)
}


</script>

<style scoped>
.person {
    background-color: rgb(114, 172, 201);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin-right: 10px;
}
</style>
